<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>React基础知识笔记 | 黑不溜球de博客么么哒</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="react笔记1.react导读1.1react脚手架​    1.全局安装脚手架:npm install -g create-react-app ​    2.create react app 项目名称 ​    3.npm start 1.2一个简单的hello world12345&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;   let a &#x3D; &amp;lt">
<meta property="og:type" content="article">
<meta property="og:title" content="React基础知识笔记">
<meta property="og:url" content="http://example.com/2020/11/03/react/index.html">
<meta property="og:site_name" content="黑不溜球de博客么么哒">
<meta property="og:description" content="react笔记1.react导读1.1react脚手架​    1.全局安装脚手架:npm install -g create-react-app ​    2.create react app 项目名称 ​    3.npm start 1.2一个简单的hello world12345&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;   let a &#x3D; &amp;lt">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-11-03T07:29:20.602Z">
<meta property="article:modified_time" content="2020-11-03T07:30:34.702Z">
<meta property="article:author" content="Jone-xin">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/my_blog/atom.xml" title="黑不溜球de博客么么哒" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/my_blog/css/style.css">

<meta name="generator" content="Hexo 5.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/my_blog/" id="logo">黑不溜球de博客么么哒</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/my_blog/">主页</a>
        
          <a class="main-nav-link" href="/my_blog/archives">归档</a>
        
          <a class="main-nav-link" target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling">@我的gitee</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/my_blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-react" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/react/" class="article-date">
  <time datetime="2020-11-03T07:29:20.602Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      React基础知识笔记
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="react笔记"><a href="#react笔记" class="headerlink" title="react笔记"></a>react笔记</h3><h4 id="1-react导读"><a href="#1-react导读" class="headerlink" title="1.react导读"></a>1.react导读</h4><h5 id="1-1react脚手架"><a href="#1-1react脚手架" class="headerlink" title="1.1react脚手架"></a>1.1react脚手架</h5><p>​    1.全局安装脚手架:<code>npm install -g create-react-app</code></p>
<p>​    2.<code>create react app 项目名称</code></p>
<p>​    3.<code>npm start</code></p>
<h5 id="1-2一个简单的hello-world"><a href="#1-2一个简单的hello-world" class="headerlink" title="1.2一个简单的hello world"></a>1.2一个简单的hello world</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">   <span class="keyword">let</span> a = <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hellow world<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">   	ReactDOM.render(a,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>))</span><br><span class="line">   <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"> &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="1-3JSX语法"><a href="#1-3JSX语法" class="headerlink" title="1.3JSX语法"></a>1.3JSX语法</h5><p>​    1.3.1.Jsx是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。</p>
<p>​    1.3.2.JSX 语法中，你可以在大括号内放置任何有效的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">JavaScript 表达式</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">let</span> name = <span class="string">&#x27;xin&#x27;</span>; </span><br><span class="line">    <span class="keyword">let</span> a = <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hellow world&#123;name&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>;</span><br><span class="line">    ReactDOM.render(a,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>));</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>1.3.3.也可以使用大括号，来在【属性】值中插入一个 JavaScript 表达式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const element &#x3D; &lt;img src&#x3D;&#123;user.avatarUrl&#125;&gt;&lt;&#x2F;img&gt;;</span><br></pre></td></tr></table></figure>

<p>1.3.4.JSX 标签里能够包含很多子元素:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const element &#x3D; (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;Hello!&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;h2&gt;Good to see you here.&lt;&#x2F;h2&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>1.3.5.<strong>JSX</strong>的转化</p>
<p>以下两种示例代码完全等效：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">const element &#x3D; (</span><br><span class="line">  &lt;h1 className&#x3D;&quot;greeting&quot;&gt;</span><br><span class="line">    Hello, world!</span><br><span class="line">  &lt;&#x2F;h1&gt;</span><br><span class="line">);</span><br><span class="line">----------------------------</span><br><span class="line">const element &#x3D; React.createElement(</span><br><span class="line">  &#39;h1&#39;,</span><br><span class="line">  &#123;className: &#39;greeting&#39;&#125;,</span><br><span class="line">  &#39;Hello, world!&#39;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p><code>React.createElement()</code> 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 注意：这是简化过的结构</span><br><span class="line">const element &#x3D; &#123;</span><br><span class="line">  type: &#39;h1&#39;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    className: &#39;greeting&#39;,</span><br><span class="line">    children: &#39;Hello, world!&#39;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。</p>
<p>1.3.6**.react只会跟新变化的元素（tree diff）**</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">   <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="keyword">let</span> element = (</span><br><span class="line">       &lt;div&gt;</span><br><span class="line">        &lt;p&gt;react只会跟新变化的dom元素以达到最大优化！&lt;/p&gt;</span><br><span class="line">        &lt;p&gt;&#123;<span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleTimeString()&#125;&lt;/p&gt; </span><br><span class="line">       &lt;/div&gt;</span><br><span class="line">     )</span><br><span class="line">     ReactDOM.render(element,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>))</span><br><span class="line">   &#125;</span><br><span class="line">   <span class="built_in">setInterval</span>(fn,<span class="number">1000</span>);</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h4 id="2-react组件"><a href="#2-react组件" class="headerlink" title="2.react组件"></a>2.react组件</h4><h5 id="2-1函数组件"><a href="#2-1函数组件" class="headerlink" title="2.1函数组件"></a>2.1函数组件</h5><p>2.1.1.<strong>props属性：</strong>它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">  <span class="comment">//工厂组件</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">Home</span> (<span class="params">props</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span>(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;组件上穿过开的值是：&#123;props.name&#125;&lt;/p&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> element = <span class="xml"><span class="tag">&lt;<span class="name">Home</span> <span class="attr">name</span>=<span class="string">&quot;鑫哥哥&quot;</span> /&gt;</span></span></span><br><span class="line">  ReactDOM.render(element,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>))</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>2.1.2.<strong>组件名称必须以大写字母开头</strong>。</p>
<p>React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<code>&lt;div /&gt;</code> 代表 HTML 的 div 标签，而 <code>&lt;Welcome /&gt;</code> 则代表一个组件，并且需在作用域内使用 <code>Welcome</code></p>
<h5 id="2-2class组件"><a href="#2-2class组件" class="headerlink" title="2.2class组件"></a>2.2class组件</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">  &#x2F;&#x2F;类组件</span><br><span class="line">  class Home extends React.Component&#123;</span><br><span class="line">    &#x2F;&#x2F;构造函数，处理组件上传递过来的值</span><br><span class="line">    constructor(props)&#123;</span><br><span class="line">      super(props)</span><br><span class="line">    &#125;</span><br><span class="line">    render()&#123;</span><br><span class="line">      return(</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;p&gt;这是组件上穿过来的信息：&#123;this.props.name&#125;&lt;&#x2F;p&gt; </span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  let element &#x3D; &lt;Home name&#x3D;&quot;鑫哥哥&quot; &#x2F;&gt;</span><br><span class="line">  ReactDOM.render(element,document.getElementById(&#39;box&#39;))</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="2-3-组件的生命周期和state"><a href="#2-3-组件的生命周期和state" class="headerlink" title="2.3.组件的生命周期和state"></a>2.3.组件的生命周期和state</h5><p>2.3.1.利用类组件重新写一遍时钟跟新</p>
<p>​         <strong>修改state中的值，必须通过<code>setState()</code>来更新</strong></p>
<p>​         <strong><code>props</code>和<code>state</code>的更新是异步的</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">      &#x2F;&#x2F;类组件</span><br><span class="line">     class Clock extends React.Component&#123;</span><br><span class="line">       constructor(props)&#123;</span><br><span class="line">          super(props)</span><br><span class="line">          this.state &#x3D; &#123;date:new Date()&#125;</span><br><span class="line">       &#125;</span><br><span class="line">       &#x2F;&#x2F;将被挂在的时候开启定时器</span><br><span class="line">       componentDidMount()&#123;</span><br><span class="line">         &#x2F;&#x2F;设置定时器，改变state的值</span><br><span class="line">         let timer &#x3D; setInterval(()&#x3D;&gt;&#123;</span><br><span class="line">           this.setState(&#123;</span><br><span class="line">             date:new Date()</span><br><span class="line">           &#125;)</span><br><span class="line">         &#125;,1000)</span><br><span class="line">       &#125;</span><br><span class="line">       &#x2F;&#x2F;组件将要销毁时清除定时器</span><br><span class="line">       componentWiiUnmount()&#123;</span><br><span class="line">        &#x2F;&#x2F;移除定时器</span><br><span class="line">        clearInterval(timer)</span><br><span class="line">       &#125;</span><br><span class="line">       render()&#123;</span><br><span class="line">         return(</span><br><span class="line">           &lt;div&gt;</span><br><span class="line">            &lt;p&gt;这是组件上穿过来的信息：&#123;this.state.date.toLocaleTimeString()&#125;&lt;&#x2F;p&gt; </span><br><span class="line">           &lt;&#x2F;div&gt;</span><br><span class="line">         )</span><br><span class="line">       &#125;</span><br><span class="line">     &#125;</span><br><span class="line">    ReactDOM.render(&lt;Clock &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>react生命周期</strong></p>
<h4 id="3-事件处理"><a href="#3-事件处理" class="headerlink" title="3.事件处理"></a>3.事件处理</h4><h5 id="3-1-react中的事件"><a href="#3-1-react中的事件" class="headerlink" title="3.1 react中的事件"></a>3.1 react中的事件</h5><ul>
<li>React 事件的命名采用小驼峰式（camelCase），而不是纯小写。</li>
<li>使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick&#x3D;&#123;activateLasers&#125;&gt;</span><br><span class="line">  Activate Lasers</span><br><span class="line">&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>React 中阻止默认事件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ActionLink</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleClick</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//e时合成事件，兼容所有浏览器</span></span><br><span class="line">    e.preventDefault();    </span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;The link was clicked.&#x27;</span>);  </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;a href=<span class="string">&quot;#&quot;</span> onClick=&#123;handleClick&#125;&gt;      </span><br><span class="line">    	Click me</span><br><span class="line">    &lt;/a&gt;</span><br><span class="line">  );  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这里的<code>e</code> 是一个合成事件。React 根据 <a target="_blank" rel="noopener" href="https://www.w3.org/TR/DOM-Level-3-Events/">W3C 规范</a>来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题</p>
<ul>
<li><p>切换显实例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">    class Toggle extends React.Component&#123;</span><br><span class="line">      constructor(props) &#123;</span><br><span class="line">        super(props)</span><br><span class="line">        this.state &#x3D; &#123;isToggle:true&#125;</span><br><span class="line">      &#125;</span><br><span class="line">      handClick()&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">          isToggle:!this.state.isToggle</span><br><span class="line">        &#125;)</span><br><span class="line">        &#x2F;&#x2F;或者</span><br><span class="line">        &#x2F;&#x2F; this.setState(state &#x3D;&gt; &#123;</span><br><span class="line">        &#x2F;&#x2F;   return(&#123;</span><br><span class="line">        &#x2F;&#x2F;     isToggle:!state.isToggle</span><br><span class="line">        &#x2F;&#x2F;   &#125;)</span><br><span class="line">        &#x2F;&#x2F; &#125;)</span><br><span class="line">        </span><br><span class="line">      &#125;</span><br><span class="line">      render()&#123;</span><br><span class="line">        return(</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &lt;p&gt;切换开关&lt;&#x2F;p&gt;</span><br><span class="line">            &lt;p&gt;现在的状态是&#123;this.state.isToggle?&#39;ON&#39;:&#39;OFF&#39;&#125;&lt;&#x2F;p&gt;</span><br><span class="line">            &lt;button onClick&#x3D;&#123;this.handClick.bind(this)&#125;&gt;切换开关&lt;&#x2F;button&gt;</span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ReactDOM.render(&lt;Toggle &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">    </span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>实验性的绑定this语法(箭头函数)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">class LoggingButton extends React.Component &#123;</span><br><span class="line">  &#x2F;&#x2F; 此语法确保 &#96;handleClick&#96; 内的 &#96;this&#96; 已被绑定。</span><br><span class="line">  &#x2F;&#x2F; 注意: 这是 *实验性* 语法。</span><br><span class="line">  handleClick &#x3D; () &#x3D;&gt; &#123;</span><br><span class="line">    console.log(&#39;this is:&#39;, this);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;button onClick&#x3D;&#123;this.handleClick&#125;&gt;</span><br><span class="line">        Click me</span><br><span class="line">      &lt;&#x2F;button&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="4-条件渲染"><a href="#4-条件渲染" class="headerlink" title="4.条件渲染"></a>4.条件渲染</h4><h5 id="4-1-if条件渲染组件"><a href="#4-1-if条件渲染组件" class="headerlink" title="4.1.if条件渲染组件"></a>4.1.if条件渲染组件</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">   function A () &#123;</span><br><span class="line">     return &lt;p&gt;我是组件A&lt;&#x2F;p&gt;</span><br><span class="line">   &#125;</span><br><span class="line">   function B () &#123;</span><br><span class="line">     return &lt;p&gt;我是组件B&lt;&#x2F;p&gt;</span><br><span class="line">   &#125;</span><br><span class="line">   class Toggle extends React.Component&#123;</span><br><span class="line">     constructor(props)&#123;</span><br><span class="line">       super(props)</span><br><span class="line">       this.state &#x3D; &#123;iss:false&#125;</span><br><span class="line">     &#125;</span><br><span class="line">     render() &#123;</span><br><span class="line">       if(this.state.iss)&#123;</span><br><span class="line">         return &lt;A &#x2F;&gt;</span><br><span class="line">       &#125;else&#123;</span><br><span class="line">         return&lt;B &#x2F;&gt; </span><br><span class="line">       &#125;</span><br><span class="line">     &#125;</span><br><span class="line">   &#125;</span><br><span class="line">   ReactDOM.render(&lt;Toggle &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">   </span><br><span class="line"> &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="4-2-amp-amp-实现条件渲染"><a href="#4-2-amp-amp-实现条件渲染" class="headerlink" title="4.2.&amp;&amp;实现条件渲染"></a>4.2.&amp;&amp;实现条件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">function Mailbox(props) &#123;</span><br><span class="line">  const unreadMessages &#x3D; props.unreadMessages;</span><br><span class="line">  return (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h1&gt;Hello!&lt;&#x2F;h1&gt;</span><br><span class="line">      &#123;unreadMessages.length &gt; 0 &amp;&amp;</span><br><span class="line">        &lt;h2&gt;</span><br><span class="line">          You have &#123;unreadMessages.length&#125; unread messages.</span><br><span class="line">        &lt;&#x2F;h2&gt;</span><br><span class="line">      &#125;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const messages &#x3D; [&#39;React&#39;, &#39;Re: React&#39;, &#39;Re:Re: React&#39;];</span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;Mailbox unreadMessages&#x3D;&#123;messages&#125; &#x2F;&gt;,</span><br><span class="line">  document.getElementById(&#39;root&#39;)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="4-3-三目运算符实现条件渲染"><a href="#4-3-三目运算符实现条件渲染" class="headerlink" title="4.3.三目运算符实现条件渲染"></a>4.3.三目运算符实现条件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  const isLoggedIn &#x3D; this.state.isLoggedIn;</span><br><span class="line">  return (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &#123;isLoggedIn        ? &lt;LogoutButton onClick&#x3D;&#123;this.handleLogoutClick&#125; &#x2F;&gt;</span><br><span class="line">        : &lt;LoginButton onClick&#x3D;&#123;this.handleLoginClick&#125; &#x2F;&gt;      &#125;</span><br><span class="line">    &lt;&#x2F;div&gt;  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="4-4-阻止组件渲染"><a href="#4-4-阻止组件渲染" class="headerlink" title="4.4.阻止组件渲染"></a>4.4.阻止组件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function WarningBanner(props) &#123;</span><br><span class="line">  if (!props.warn) </span><br><span class="line">  &#123;    </span><br><span class="line">    return null;  </span><br><span class="line">  &#125;</span><br><span class="line">  return (</span><br><span class="line">    &lt;div className&#x3D;&quot;warning&quot;&gt;</span><br><span class="line">      Warning!</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="5-列表-amp-key"><a href="#5-列表-amp-key" class="headerlink" title="5.列表&amp;key"></a>5.列表&amp;key</h4><h5 id="5-1-数组的展示"><a href="#5-1-数组的展示" class="headerlink" title="5.1.数组的展示"></a>5.1.数组的展示</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">  function Home(props)&#123;</span><br><span class="line">    return(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &#123;props.messege.map((value,index) &#x3D;&gt; &#123;</span><br><span class="line">          return &lt;p key&#x3D;&#123;index&#125;&gt;&#123;value&#125;&lt;&#x2F;p&gt;</span><br><span class="line">        &#125;)&#125;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">  let lover &#x3D; [&#39;打球&#39;,&#39;羽毛球&#39;,&#39;足球&#39;,&#39;乒乓球&#39;,&#39;台球&#39;]</span><br><span class="line">  ReactDOM.render(&lt;Home messege&#x3D;&#123;lover&#125;&#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="6-表单"><a href="#6-表单" class="headerlink" title="6.表单"></a>6.表单</h4><h5 id="6-1受控组件"><a href="#6-1受控组件" class="headerlink" title="6.1受控组件"></a>6.1受控组件</h5><p>6.1.1.受控组件的概念：渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。</p>
<p>6.1.2.实例一：实时监控表单输入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">    class Home extends React.Component&#123;</span><br><span class="line">      constructor(props)&#123;</span><br><span class="line">        super(props);</span><br><span class="line">        this.state &#x3D; &#123;value:&#39;&#39;&#125;</span><br><span class="line">      &#125;</span><br><span class="line">      handInput(e)&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">          value:e.target.value</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">      handSubmit(e)&#123;</span><br><span class="line">        alert(this.state.value)</span><br><span class="line">      &#125;</span><br><span class="line">      render()&#123;</span><br><span class="line">        return(</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; onChange&#x3D;&#123;this.handInput.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">            &#x2F;&#x2F;p标签实时显示表单的输入内容</span><br><span class="line">            &lt;p&gt;&#123;this.state.value&#125;&lt;&#x2F;p&gt;</span><br><span class="line">            &#x2F;&#x2F;提交的时候显示最终表单的内容</span><br><span class="line">            &lt;button onClick&#x3D;&#123;this.handSubmit.bind(this)&#125; &gt;提交&lt;&#x2F;button&gt;</span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ReactDOM.render(&lt;Home &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="7-状态提升"><a href="#7-状态提升" class="headerlink" title="7.状态提升"></a>7.状态提升</h4><h5 id="7-1-将多个组件中需要共享的-state-向上移动到它们的最近共同父组件中，便可实现共享-state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）"><a href="#7-1-将多个组件中需要共享的-state-向上移动到它们的最近共同父组件中，便可实现共享-state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）" class="headerlink" title="7.1.将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）"></a>7.1.将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）</h5><p>7.1.1.摄氏度与华氏度转换案例：</p>
<ul>
<li>父组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">class Home extends React.Component&#123;</span><br><span class="line">  constructor(props)&#123;</span><br><span class="line">    super(props)</span><br><span class="line">    this.state &#x3D; &#123;sheshidu:32,huashidu:0&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;华氏度转化</span><br><span class="line">  huashi(data)&#123;</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      sheshidu:data*(9&#x2F;5)+32</span><br><span class="line">    &#125;)</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      huashidu:data</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;摄氏度转化</span><br><span class="line">  sheshi(data)&#123;</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      sheshidu:data</span><br><span class="line">    &#125;)</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      huashidu:(5&#x2F;9)*(data-32)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;Sheshi temp&#x3D;&#123;this.state.sheshidu&#125; sheshi&#x3D;&#123;this.sheshi.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">        &lt;Huashi temp&#x3D;&#123;this.state.huashidu&#125; huashi&#x3D;&#123;this.huashi.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>sheshi组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;摄氏度</span><br><span class="line">class Sheshi extends React.Component&#123;</span><br><span class="line">  constructor(props)&#123;</span><br><span class="line">    super(props)</span><br><span class="line">    this.state &#x3D; &#123;value:0&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;自组件向父组件传数据通过父组件定义的函数，子组件回调</span><br><span class="line">  handChange(e)&#123;</span><br><span class="line">    this.props.sheshi(e.target.value)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;摄氏度&lt;&#x2F;p&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; value&#x3D;&#123;this.props.temp&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ul>
<li>huashi组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;华氏度</span><br><span class="line">class Huashi extends React.Component&#123;</span><br><span class="line">  constructor(props)&#123;</span><br><span class="line">    super(props)</span><br><span class="line">    this.state &#x3D; &#123;value:0&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;自组件向父组件传数据通过父组件定义的函数，子组件回调</span><br><span class="line">  handChange(e)&#123;</span><br><span class="line">    this.props.huashi(e.target.value)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;华氏度&lt;&#x2F;p&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; value&#x3D;&#123;this.props.temp&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="8-组合VS继承"><a href="#8-组合VS继承" class="headerlink" title="8.组合VS继承"></a>8.组合VS继承</h4><h5 id="8-1-组件可以接受任意-props，包括基本数据类型，React-元素以及函数。"><a href="#8-1-组件可以接受任意-props，包括基本数据类型，React-元素以及函数。" class="headerlink" title="8.1 组件可以接受任意 props，包括基本数据类型，React 元素以及函数。"></a>8.1 组件可以接受任意 props，包括基本数据类型，React 元素以及函数。</h5><p>8.1.1.以一个类似插槽的例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">  class Son extends React.Component&#123;</span><br><span class="line">    constructor(props)&#123;</span><br><span class="line">      super(props)</span><br><span class="line">    &#125;</span><br><span class="line">    render() &#123;</span><br><span class="line">      return (</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">         &lt;p&gt;左边&lt;&#x2F;p&gt;</span><br><span class="line">         &#123;props.left&#125; &#123;&#x2F;*类似插槽占位置*&#x2F;&#125;</span><br><span class="line">         &lt;p&gt;左边&lt;&#x2F;p&gt;</span><br><span class="line">         &#123;props.right&#125; &#123;&#x2F;*类似插槽占位置*&#x2F;&#125;  </span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  class Home extends React.Component&#123;</span><br><span class="line">    render() &#123;</span><br><span class="line">      return (</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;Son left&#x3D;&#123;&lt;A &#x2F;&gt;&#125; right&#x3D;&#123;&lt;B &#x2F;&gt;&#125; &#x2F;&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  function A()&#123;</span><br><span class="line">    return(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">         &lt;p&gt;组件A&lt;&#x2F;p&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">  function B()&#123;</span><br><span class="line">    return(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">         &lt;p&gt;组件B&lt;&#x2F;p&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">   ReactDOM.render(&lt;Home &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line"> &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="9-无障碍"><a href="#9-无障碍" class="headerlink" title="9.无障碍"></a>9.无障碍</h4><h5 id="9-1正确的语意话"><a href="#9-1正确的语意话" class="headerlink" title="9.1正确的语意话"></a>9.1正确的语意话</h5><p>9.1.1.比如当在 JSX 中使用 <code>&lt;div&gt;</code> 元素来实现 React 代码功能的时候，又或是在使用列表（<code>&lt;ol&gt;</code>， <code>&lt;ul&gt;</code> 和 <code>&lt;dl&gt;</code>）和 HTML <code>&lt;table&gt;</code> 时。 在这种情况下，我们应该使用 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/fragments.html">React Fragments</a> 来组合各个组件。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">import React, &#123; Fragment &#125; from &#39;react&#39;;</span><br><span class="line">function ListItem(&#123; item &#125;) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;Fragment&gt;      </span><br><span class="line">      &lt;dt&gt;&#123;item.term&#125;&lt;&#x2F;dt&gt;</span><br><span class="line">      &lt;dd&gt;&#123;item.description&#125;&lt;&#x2F;dd&gt;</span><br><span class="line">    &lt;&#x2F;Fragment&gt;  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Glossary(props) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;dl&gt;</span><br><span class="line">      &#123;props.items.map(item &#x3D;&gt; (</span><br><span class="line">        &lt;ListItem item&#x3D;&#123;item&#125; key&#x3D;&#123;item.id&#125; &#x2F;&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">    &lt;&#x2F;dl&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>9.1.2.当你不需要在 fragment 标签中添加任何 prop 且你的工具支持的时候，你可以使用 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/fragments.html#short-syntax">短语法</a>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function ListItem(&#123; item &#125;) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;&gt;      </span><br><span class="line">    	&lt;dt&gt;&#123;item.term&#125;&lt;&#x2F;dt&gt;</span><br><span class="line">      &lt;dd&gt;&#123;item.description&#125;&lt;&#x2F;dd&gt;</span><br><span class="line">    &lt;&#x2F;&gt;  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>9.1.3请注意 <code>for</code> 在 JSX 中应该被写作 <code>htmlFor</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;label htmlFor&#x3D;&quot;namedInput&quot;&gt;Name:&lt;&#x2F;label&gt;</span><br><span class="line">&lt;input id&#x3D;&quot;namedInput&quot; type&#x3D;&quot;text&quot; name&#x3D;&quot;name&quot;&#x2F;&gt;</span><br></pre></td></tr></table></figure>

<h5 id="9-2三种引用对象的方式（ref）"><a href="#9-2三种引用对象的方式（ref）" class="headerlink" title="9.2三种引用对象的方式（ref）"></a>9.2三种引用对象的方式（ref）</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">class Home extends React.Component&#123;</span><br><span class="line">      constructor(props)&#123;</span><br><span class="line">        super(props)</span><br><span class="line">        this.textInput &#x3D; React.createRef()</span><br><span class="line">      &#125;</span><br><span class="line">      handChange(e)&#123;</span><br><span class="line">        &#x2F;&#x2F;1,拿到元素对应的value</span><br><span class="line">        console.log(this.textInput.current.value)</span><br><span class="line">        console.log(this.refs.a.value)</span><br><span class="line">        console.log(this.content.value)</span><br><span class="line">      &#125;</span><br><span class="line">      render() &#123;</span><br><span class="line">        return (</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &#x2F;&#x2F;创建一个ref指引</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; ref&#x3D;&#123;this.textInput&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125; &#x2F;&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; ref&#x3D;&quot;a&quot; onChange&#x3D;&#123;this.handChange.bind(this)&#125; &#x2F;&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; ref&#x3D;&#123;input&#x3D;&gt;this.content &#x3D; input&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125; &#x2F;&gt;</span><br><span class="line">          </span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ReactDOM.render(&lt;Home &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="9-3-context的使用"><a href="#9-3-context的使用" class="headerlink" title="9.3 context的使用"></a>9.3 context的使用</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。&#x2F;&#x2F; 为当前的 theme 创建一个 context（“light”为默认值）。const ThemeContext &#x3D; React.createContext(&#39;light&#39;);class App extends React.Component &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    &#x2F;&#x2F; 使用一个 Provider 来将当前的 theme 传递给以下的组件树。    &#x2F;&#x2F; 无论多深，任何组件都能读取这个值。    &#x2F;&#x2F; 在这个例子中，我们将 “dark” 作为当前的值传递下去。    return (</span><br><span class="line">      &lt;ThemeContext.Provider value&#x3D;&quot;dark&quot;&gt;        &lt;Toolbar &#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;ThemeContext.Provider&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 中间的组件再也不必指明往下传递 theme 了。function Toolbar() &#123;  return (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;ThemedButton &#x2F;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class ThemedButton extends React.Component &#123;</span><br><span class="line">  &#x2F;&#x2F; 指定 contextType 读取当前的 theme context。  &#x2F;&#x2F; React 会往上找到最近的 theme Provider，然后使用它的值。  &#x2F;&#x2F; 在这个例子中，当前的 theme 值为 “dark”。  static contextType &#x3D; ThemeContext;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return &lt;Button theme&#x3D;&#123;this.context&#125; &#x2F;&gt;;  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="10-错误边界"><a href="#10-错误边界" class="headerlink" title="10 错误边界"></a>10 错误边界</h4><h5 id="10-1-错误边界是一种-React-组件，这种组件可以捕获并打印发生在其子组件树任何位置的-JavaScript-错误，并且，它会渲染出备用-UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。"><a href="#10-1-错误边界是一种-React-组件，这种组件可以捕获并打印发生在其子组件树任何位置的-JavaScript-错误，并且，它会渲染出备用-UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。" class="headerlink" title="10.1 错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。"></a>10.1 错误边界是一种 React 组件，这种组件<strong>可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI</strong>，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。</h5><h5 id="10-2如果一个-class-组件中定义了-static-getDerivedStateFromError-或-componentDidCatch-这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用-static-getDerivedStateFromError-渲染备用-UI-，使用-componentDidCatch-打印错误信息。"><a href="#10-2如果一个-class-组件中定义了-static-getDerivedStateFromError-或-componentDidCatch-这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用-static-getDerivedStateFromError-渲染备用-UI-，使用-componentDidCatch-打印错误信息。" class="headerlink" title="10.2如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。"></a>10.2如果一个 class 组件中定义了 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror"><code>static getDerivedStateFromError()</code></a> 或 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch"><code>componentDidCatch()</code></a> 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 <code>static getDerivedStateFromError()</code> 渲染备用 UI ，使用 <code>componentDidCatch()</code> 打印错误信息。</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">class ErrorBoundary extends React.Component &#123;</span><br><span class="line">  constructor(props) &#123;</span><br><span class="line">    super(props);</span><br><span class="line">    this.state &#x3D; &#123; hasError: false &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  static getDerivedStateFromError(error) &#123;    &#x2F;&#x2F; 更新 state 使下一次渲染能够显示降级后的 UI    return &#123; hasError: true &#125;;  &#125;</span><br><span class="line">  componentDidCatch(error, errorInfo) &#123;    &#x2F;&#x2F; 你同样可以将错误日志上报给服务器    logErrorToMyService(error, errorInfo);  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    if (this.state.hasError) &#123;      &#x2F;&#x2F; 你可以自定义降级后的 UI 并渲染      return &lt;h1&gt;Something went wrong.&lt;&#x2F;h1&gt;;    &#125;</span><br><span class="line">    return this.props.children; </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="11-Ref-转发"><a href="#11-Ref-转发" class="headerlink" title="11.Ref 转发"></a>11.Ref 转发</h4><h5 id="11-1-ref转发是一个可选特性，其允许某些组件接收-ref，并将其向下传递（换句话说，“转发”它）给子组件。"><a href="#11-1-ref转发是一个可选特性，其允许某些组件接收-ref，并将其向下传递（换句话说，“转发”它）给子组件。" class="headerlink" title="11.1.ref转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。"></a>11.1.ref转发是一个可选特性，其允许某些组件接收 <code>ref</code>，并将其向下传递（换句话说，“转发”它）给子组件。</h5><p>在下面的示例中，<code>FancyButton</code> 使用 <code>React.forwardRef</code> 来获取传递给它的 <code>ref</code>，然后转发到它渲染的 DOM <code>button</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">const FancyButton &#x3D; React.forwardRef((props, ref) &#x3D;&gt; (  </span><br><span class="line">  &lt;button ref&#x3D;&#123;ref&#125; className&#x3D;&quot;FancyButton&quot;&gt;    &#123;props.children&#125;</span><br><span class="line">  &lt;&#x2F;button&gt;</span><br><span class="line">));</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 你可以直接获取 DOM button 的 ref：</span><br><span class="line">const ref &#x3D; React.createRef();</span><br><span class="line">&lt;FancyButton ref&#x3D;&#123;ref&#125;&gt;Click me!&lt;&#x2F;FancyButton&gt;;</span><br></pre></td></tr></table></figure>

<h4 id="12-带-key-的-Fragments"><a href="#12-带-key-的-Fragments" class="headerlink" title="12.带 key 的 Fragments"></a>12.带 key 的 Fragments</h4><h5 id="12-1使用显式-lt-React-Fragment-gt-语法声明的片段可能具有-key。一个使用场景是将一个集合映射到一个-Fragments-数组-举个例子，创建一个描述列表："><a href="#12-1使用显式-lt-React-Fragment-gt-语法声明的片段可能具有-key。一个使用场景是将一个集合映射到一个-Fragments-数组-举个例子，创建一个描述列表：" class="headerlink" title="12.1使用显式 &lt;React.Fragment&gt; 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表："></a>12.1使用显式 <code>&lt;React.Fragment&gt;</code> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function Glossary(props) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;dl&gt;</span><br><span class="line">      &#123;props.items.map(item &#x3D;&gt; (</span><br><span class="line">        &#x2F;&#x2F; 没有&#96;key&#96;，React 会发出一个关键警告</span><br><span class="line">        &lt;React.Fragment key&#x3D;&#123;item.id&#125;&gt;</span><br><span class="line">          &lt;dt&gt;&#123;item.term&#125;&lt;&#x2F;dt&gt;</span><br><span class="line">          &lt;dd&gt;&#123;item.description&#125;&lt;&#x2F;dd&gt;</span><br><span class="line">        &lt;&#x2F;React.Fragment&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">    &lt;&#x2F;dl&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="13-react路由"><a href="#13-react路由" class="headerlink" title="13.react路由"></a>13.react路由</h4><h5 id="13-1-hashRouter-和-BrowserRouter"><a href="#13-1-hashRouter-和-BrowserRouter" class="headerlink" title="13.1 hashRouter 和 BrowserRouter"></a>13.1 hashRouter 和 BrowserRouter</h5><p><code>hashRouter</code>:hash模式，带#号，刷新页面不会丢失</p>
<p><code>browserRouter</code>:历史记录模式，无#号，通过的是历史记录api来路由切换，刷新会丢失，本地模式不会。</p>
<h5 id="13-2-路由的使用"><a href="#13-2-路由的使用" class="headerlink" title="13.2 路由的使用"></a>13.2 路由的使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Switch,Route,NavLink,withRouter,Redirect&#125; <span class="keyword">from</span> <span class="string">&#x27;react-router-dom&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">&#x27;./compoents/Home&#x27;</span></span><br><span class="line"><span class="keyword">import</span> User <span class="keyword">from</span> <span class="string">&#x27;./compoents/User&#x27;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(props)</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &#123;<span class="comment">/* 导航跳转 */</span>&#125;</span><br><span class="line">      &lt;NavLink to=<span class="string">&quot;/home&quot;</span> &gt;home&lt;/NavLink&gt;</span><br><span class="line">      &lt;NavLink to=<span class="string">&quot;/user&quot;</span> &gt;user&lt;/NavLink&gt;</span><br><span class="line">      &#123;<span class="comment">/* js实现跳转 */</span>&#125;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;props.history.push(<span class="string">&#x27;/home&#x27;</span>)&#125;&#125;&gt;跳转到home&lt;/button&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;props.history.push(<span class="string">&#x27;/user&#x27;</span>)&#125;&#125;&gt;跳转到user&lt;/button&gt;</span><br><span class="line">      &lt;Switch&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/home&quot;</span>  component=&#123;Home&#125;&gt;&lt;/Route&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/user&quot;</span> component=&#123;User&#125;&gt;&lt;/Route&gt;</span><br><span class="line">        &#123;<span class="comment">/* 重定向 */</span>&#125;</span><br><span class="line">        &lt;Redirect <span class="keyword">from</span>=<span class="string">&quot;/&quot;</span> to=<span class="string">&quot;/home/a&quot;</span>&gt;&lt;/Redirect&gt;</span><br><span class="line">        </span><br><span class="line">      &lt;/Switch&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//withRouter  高阶组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> withRouter(App);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>home页面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;Route,NavLink&#125; <span class="keyword">from</span> <span class="string">&#x27;react-router-dom&#x27;</span></span><br><span class="line"><span class="keyword">import</span> A <span class="keyword">from</span> <span class="string">&#x27;./home/A&#x27;</span></span><br><span class="line"><span class="keyword">import</span> B <span class="keyword">from</span> <span class="string">&#x27;./home/B&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Home</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        我是home组件的内容</span><br><span class="line">        &lt;p&gt;---------------&lt;/p&gt;</span><br><span class="line">        &#123;<span class="comment">/* 路由嵌套 */</span>&#125;</span><br><span class="line">        &lt;NavLink to=<span class="string">&quot;/home/a&quot;</span>&gt;A&lt;/NavLink&gt;</span><br><span class="line">        &lt;NavLink to=<span class="string">&quot;/home/b&quot;</span>&gt;B&lt;/NavLink&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/home/a&quot;</span> component=&#123;A&#125; &gt;&lt;/Route&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/home/b&quot;</span> component=&#123;B&#125; &gt;&lt;/Route&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="13-3-路由传参"><a href="#13-3-路由传参" class="headerlink" title="13.3.路由传参"></a>13.3.路由传参</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.通过params传参</span></span><br><span class="line">&lt;NavLink to=<span class="string">&quot;/user/xin&quot;</span> &gt;user&lt;/NavLink&gt;</span><br><span class="line">&lt;Route path=<span class="string">&quot;/user/:id?&quot;</span> component=&#123;User&#125;&gt;&lt;/Route&gt;</span><br><span class="line"><span class="comment">//在user页面通过以下方式</span></span><br><span class="line"><span class="built_in">this</span>.props.match.params.id</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.通过query传参</span></span><br><span class="line">&#123;<span class="comment">/* query传参 */</span>&#125;</span><br><span class="line">&lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;<span class="built_in">this</span>.props.history.push(&#123;<span class="attr">pathname</span>:<span class="string">&#x27;/home/a&#x27;</span>,<span class="attr">query</span>:&#123;<span class="attr">name</span>:<span class="string">&#x27;xin&#x27;</span>&#125;&#125;)&#125;&#125; &gt;跳转A&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<h4 id="14-hook"><a href="#14-hook" class="headerlink" title="14.hook"></a>14.hook</h4><h5 id="14-1hook是专门为无状态的组件产生状态"><a href="#14-1hook是专门为无状态的组件产生状态" class="headerlink" title="14.1hook是专门为无状态的组件产生状态"></a>14.1hook是专门为无状态的组件产生状态</h5><p>14.1.1基本使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React,&#123;useState,useEffect&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count,setCount] = useState(<span class="number">0</span>)</span><br><span class="line">  <span class="keyword">const</span> [count1,setCount1] = useState(&#123;<span class="attr">name</span>:<span class="string">&#x27;xin&#x27;</span>&#125;)</span><br><span class="line">  <span class="comment">//相当于componentDidMount 和 componentDidUpdate</span></span><br><span class="line">  useEffect(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;p&gt;&#123;count1.name&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;setCount(count+<span class="number">1</span>)&#125;&#125;&gt;加一&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App</span><br></pre></td></tr></table></figure>

<h4 id="15-redux"><a href="#15-redux" class="headerlink" title="15 redux"></a>15 redux</h4><h5 id="15-1-redux的基本使用"><a href="#15-1-redux的基本使用" class="headerlink" title="15.1.redux的基本使用"></a>15.1.redux的基本使用</h5><p>redux目录结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">redux</span><br><span class="line"> -store.js</span><br><span class="line"> -action.js</span><br><span class="line"> -reducer</span><br><span class="line">   -reducer.js</span><br><span class="line">   -reducer1.js</span><br><span class="line">    ...多个reducer</span><br><span class="line">   -index.js(合并reducer)</span><br></pre></td></tr></table></figure>

<p>Store.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;redux&#x27;</span></span><br><span class="line"><span class="comment">//引用reducer</span></span><br><span class="line"><span class="keyword">import</span> rootReducer <span class="keyword">from</span> <span class="string">&#x27;./reducer/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> store = createStore(rootReducer)</span><br></pre></td></tr></table></figure>

<p>Action.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义想要对store中数据进行的操作</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">updateName</span> (<span class="params">newName</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    type:<span class="string">&#x27;UPDATE&#x27;</span>,</span><br><span class="line">    data:newName</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Reducer.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//公共管理的数据类型二</span></span><br><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line">  <span class="number">1</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span></span><br><span class="line">]</span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">data</span>(<span class="params">state = arr, action</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">return</span> state</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Reducer2.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//公共管理的数据类型一</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">name</span>:<span class="string">&#x27;xin&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">data1</span>(<span class="params">state = obj, action</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&quot;UPDATE&quot;</span> :&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;<span class="attr">name</span>:action.data,<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">return</span> state</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;combineReducers&#125; <span class="keyword">from</span> <span class="string">&#x27;redux&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;data&#125; <span class="keyword">from</span> <span class="string">&#x27;./reducer&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;data1&#125; <span class="keyword">from</span> <span class="string">&#x27;./reducer2&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> rootReducer = combineReducers(&#123;</span><br><span class="line">  data,</span><br><span class="line">  data1</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> rootReducer</span><br></pre></td></tr></table></figure>

<p>使用的文件.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="comment">//引用redux管理的数据</span></span><br><span class="line"><span class="keyword">import</span> &#123;store&#125; <span class="keyword">from</span> <span class="string">&#x27;../redux/store&#x27;</span></span><br><span class="line"><span class="comment">//导入全部的action中的方法</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> action <span class="keyword">from</span> <span class="string">&#x27;../redux/anction&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">User</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">props</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>(props)</span><br><span class="line">    <span class="built_in">this</span>.state = &#123;</span><br><span class="line">      inf:store.getState(),</span><br><span class="line">      <span class="comment">//获取指定reducer的数据</span></span><br><span class="line">      age:store.getState().data1.age</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.props.match.params.id)</span><br><span class="line">     <span class="comment">//监听修改操作</span></span><br><span class="line">     store.subscribe(<span class="function">() =&gt;</span> &#123;<span class="built_in">this</span>.setState(&#123;</span><br><span class="line">      inf:store.getState()</span><br><span class="line">     &#125;)&#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">handClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    store.dispatch(action.updateName(<span class="string">&#x27;xxxxx&#x27;</span>))</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        用户组件</span><br><span class="line">      &lt;p&gt;&#123;<span class="built_in">this</span>.state.inf.data1.name&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="built_in">this</span>.handClick.bind(<span class="built_in">this</span>)&#125;&gt;更新store中的名字&lt;/button&gt;</span><br><span class="line">			&lt;p&gt;&#123;<span class="built_in">this</span>.state.age&#125;&lt;/p&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="16-React-redux"><a href="#16-React-redux" class="headerlink" title="16.React-redux"></a>16.React-redux</h4><h5 id="16-1-为了让redux更好的适应react，将-store-中的数据作为-props-绑定到组件上方便调用"><a href="#16-1-为了让redux更好的适应react，将-store-中的数据作为-props-绑定到组件上方便调用" class="headerlink" title="16.1 为了让redux更好的适应react，将 store 中的数据作为 props 绑定到组件上方便调用"></a>16.1 为了让redux更好的适应react，<u>将 store 中的数据作为 props 绑定到组件上方便调用</u></h5><p>16.1.1.<strong>react-redux核心</strong></p>
<ul>
<li><strong><provider store></provider></strong></li>
<li>connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])</li>
</ul>
<h5 id="16-2-react-redux的使用"><a href="#16-2-react-redux的使用" class="headerlink" title="16.2, react-redux的使用"></a>16.2, react-redux的使用</h5><p>16.2.1.想要引入redux库中的元素的组件</p>
<p>Test.jsx</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> action <span class="keyword">from</span> <span class="string">&#x27;../redux/anction&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;connect&#125; <span class="keyword">from</span>  <span class="string">&#x27;react-redux&#x27;</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Test</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &#123;<span class="built_in">this</span>.props.name&#125;</span><br><span class="line">        &#123;<span class="built_in">this</span>.props.age&#125;</span><br><span class="line">        &lt;button onClick=&#123;<span class="built_in">this</span>.props.update.bind(<span class="built_in">this</span>,<span class="string">&#x27;鑫哥哥&#x27;</span>)&#125;&gt;点击改变reducer中姓名&lt;/button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//映射store.getState()到props中</span></span><br><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">state</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span>&#123;</span><br><span class="line">    name:state.data1.name,</span><br><span class="line">    age:state.data1.age</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//映射修改触发函数</span></span><br><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span>&#123;</span><br><span class="line">    <span class="comment">//props中的调用名     //触发action中的函数</span></span><br><span class="line">    update:<span class="function">(<span class="params">name</span>)=&gt;</span>&#123;dispatch(action.updateName(name))&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//连接store 和 这些出发函数</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps, mapDispatchToProps)(Test)</span><br></pre></td></tr></table></figure>

<p>Index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">&#x27;react-dom&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;HashRouter&#125; <span class="keyword">from</span> <span class="string">&#x27;react-router-dom&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;Provider&#125; <span class="keyword">from</span> <span class="string">&#x27;react-redux&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;store&#125; <span class="keyword">from</span> <span class="string">&#x27;./redux/store&#x27;</span></span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">    &lt;Provider store=&#123;store&#125;&gt;</span><br><span class="line">      &lt;HashRouter&gt;</span><br><span class="line">        &lt;App /&gt;</span><br><span class="line">      &lt;/HashRouter&gt;</span><br><span class="line">    &lt;/Provider&gt;,</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">&#x27;root&#x27;</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h4 id="17"><a href="#17" class="headerlink" title="17"></a>17</h4>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/react/" data-id="ckhmnwyu700076rx42933dh2f" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/my_blog/2020/11/18/zhengze/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          JS中的正则表达式
        
      </div>
    </a>
  
  
    <a href="/my_blog/2020/11/03/vue/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Vue基础知识笔记</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/11/">November 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/10/">October 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/my_blog/2020/11/18/zhengze/">JS中的正则表达式</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/react/">React基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/vue/">Vue基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/async/">JS异步编程的三种方案</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/computer/">计算机网路笔记</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jone-xin<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/my_blog/" class="mobile-nav-link">主页</a>
  
    <a href="/my_blog/archives" class="mobile-nav-link">归档</a>
  
    <a target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling" class="mobile-nav-link">@我的gitee</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/my_blog/fancybox/jquery.fancybox.css">

  
<script src="/my_blog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/my_blog/js/script.js"></script>




  </div>
</body>
</html>